<template>
  <div class="allOrderContainer">
    <div class="actions">
      <div class="left" style="padding-bottom: 10px">
        <el-button
          type="primary"
          plain
          size="mini"
          data-tracker="P8-1"
          @click="() => handleClickCreate('3')"
          >创建配送单</el-button
        >
        <el-button
          type="primary"
          plain
          size="mini"
          data-tracker="P8-2"
          @click="() => handleClickCreate('30')"
          >到港入库</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          :current-page="paginations.pageIndex"
          :page-sizes="paginations.pageSizes"
          :page-size="paginations.pageSize"
          :layout="paginations.layout"
          :total="paginations.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      :max-height="maxheight"
      ref="multipleTable"
      :data="orders"
      border
      stripe
      align="center"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column type="index" fixed label="序号" width="50">
      </el-table-column>
      <el-table-column prop="waybill_no" fixed label="运单号" width="180">
        <template slot-scope="scope">
          <span style="cursor: pointer; color: blue" @click="handleJump(scope)"
            >{{ scope.row.waybill_no }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="transport_way" label="运输方式" width="180">
      </el-table-column> -->

      <el-table-column prop="from_network_name" label="出发网点" width="180">
      </el-table-column>

      <el-table-column prop="to_network_name" label="目的网点" width="180">
      </el-table-column>
      <el-table-column
        property="sender_name"
        label="发货人"
        width="150"
      ></el-table-column>
      <el-table-column
        property="sender_phone"
        label="发货人电话"
        width="150"
      ></el-table-column>
      <el-table-column
        property="sender_address"
        label="发货地址"
        width="280"
      ></el-table-column>
      <el-table-column
        property="receiver_name"
        label="收货人"
        width="150"
      ></el-table-column>
      <el-table-column
        property="receiver_phone"
        label="收货人电话"
        width="150"
      ></el-table-column>
      <el-table-column
        property="receiver_address"
        label="收货地址"
        width="280"
      ></el-table-column>
      <el-table-column prop="from_region_name" label="干线始发地址" width="180">
      </el-table-column>
      <el-table-column prop="to_region_name" label="干线目的地址" width="180">
      </el-table-column>
      <!-- <el-table-column prop="thermosphere" label="温层" width="180">
      </el-table-column>
      <el-table-column prop="delivery_method" label="干线车牌号" width="180">
      </el-table-column>
      <el-table-column prop="delivery_method" label="实际达到时间" width="180">
      </el-table-column> -->
    </el-table>
    <StepOperation
      mode="add"
      :showDialog="showDialog"
      :ids="checkedOrders.map(Number)"
      :step="step"
      @closeDialog="handleCloseDialog"
    ></StepOperation>
  </div>
</template>
<script>
import { StockListFn } from "@/api/waybill";
import StepOperation from "./components/stepOperation.vue";
export default {
  name: "tobedelivered",
  components: { StepOperation },
  data() {
    return {
      orders: [],
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      checkedOrders: [],
      step: "",
      showDialog: false,
      maxheight: 400,
    };
  },
  computed: {},
  mounted() {
    this.getStockList();
  },
  methods: {
    // 创建配送单
    handleClickCreate(step) {
      if (this.checkedOrders.length === 0) {
        this.$message({
          type: "warning",
          message: "请选中运单后进行操作",
        });
        return;
      }
      this.step = step;
      this.showDialog = true;
    },
    handleSelectionChange(val) {
      this.checkedOrders = val.map((item) => item.area_id);
    },
    async handleJump(scope) {
      const id = scope.row.area_id;
      this.$router.push({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
    },
    getStockList() {
      StockListFn({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        repertory_type: "0",
      }).then((res) => {
        this.orders = res.data.data;
        // console.log(this.orders,'------')
        this.paginations.total = res.data.total;
      });
    },
    handleCloseDialog() {
      this.showDialog = false;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getStockList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getStockList();
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
    padding: 0px 15px 0px 0px;
  }
}
</style>
